Reactを使って、AI生成の戦利品が手に入るトレジャーチェストのweb3アプリの作り方を解説します。認証にはEmbedded Wallet、トランザクション処理を簡単にするためにCloudflare Worker、Sequence Stackのツールを活用します。
Gas Sponsoring
や Transactions API
など一部機能を利用するには、こちらの手順に従ってプロジェクトプランを Developer
にアップグレードする必要があります。
Waas Config Key
:Embedded Wallet 用。詳細はこちらをご覧ください。
・Public Access Key
:Embedded Wallet および Transactions API 用。取得方法はこちらをご参照ください。
・Secret Access Key
:Metadata Service 用。以下の手順で取得します。
Waas Config Key
:Embedded Wallet 用。詳細はこちらをご覧ください。Public Access Key
:Embedded Wallet および Transactions API 用。取得方法はこちらをご参照ください。Secret Access Key
:Metadata Service 用。以下の手順で取得します。設定画面を開く
サービスアカウントの追加
+ Add Service Account
を選択します。書き込み権限の選択
Write
と Confirm
に変更します。copy
をクリックし、キーを安全な場所に保管してください。なお、Builder Console からは今後再確認できません。mkdir <project>
でプロジェクトフォルダを作成し、cd <project>
で移動後、React を使って vite
プロジェクトを作成します:
/src
ディレクトリ内に作成してください。
まず SequenceEmbeddedWallet.ts
などの名前でファイルを作成し、以下の初期化コードを記述します:
useSessionHash.ts
ファイルを作成します:
GoogleOAuthProvider
でラップする必要があります。以下のコマンドで、後ほど利用する Apple Auth サインインも含めてインストールします:
main.tsx
ファイル内で先ほどインポートしたファイルを使い、スターターコードを実装します:
main.tsx
の準備ができたら、次はログインボタンを作成します。見た目は以下のようになります:
App.tsx
では、ユーザーが接続されているかを確認し、サインインしたユーザーに基づいてウォレットアドレスを表示するコードと、各種ソーシャル認証ボタンやハンドラーを実装します:
.env
ファイルを作成し、.gitignore
に追加したうえで、Sequence Builder から取得した以下の値でファイルを更新します:
VITE_
で始める必要があります。ERC1155
の利用を推奨します。ERC721
よりも ERC1155
を使う利点については以下で説明します。
wrangler.toml
に CONTRACT_ADDRESS
を設定してください。
ミント機能をプログラムで実行し、リレイヤーのトランザクションをガスレスにするには、アップグレードした請求プランのアカウントクレジットから Transactions API が利用できるよう、デプロイしたスマートコントラクトアドレスをスポンサー登録する必要があります。
Transactions API で手数料なしでトランザクションをリレーできるようにするには、こちらのガイドに従い、デプロイ済みコントラクトのガススポンサー設定を行ってください。
ERC1155
コントラクトを使ったサーバーレスNFTミントサービスの構築方法を確認するか、本ガイド専用のテンプレートをクローンしてください。
MINTER_ROLE
を付与してください。generate
関数でデプロイ済み Diablo API のプロンプトを利用して画像を生成する方法を紹介します:
name
と type
を含む prompt
、および追加のモデルパラメータ(Scenario API ドキュメントでカスタマイズ可能)を渡す getInferenceWithItem
関数を完成させます:
EulerDiscreteScheduler
スケジューラータイプを採用していますが、他のスケジューラーも試したい場合はこちらのカスタムローカルCLIを利用し、Scenario.gg ダッシュボードで結果を確認できます。inferenceId
を取得したら、推論ステータスをポーリングし、succeeded
ステータスになった時点で完了として返します。
inferenceId
を渡します。レスポンスを受け取ったら、resObject.inference.images[0].url
で画像のURLを取得できます:
url
を使い、次はそのアセットをSequence Metadata Service
に保存します。これにより、AI生成画像を特定のトークンメタデータに紐付けることができます。これらはすべてREST-API経由で実現できます。
Dungeon Minterの宝箱報酬はすべて同じプロセスに従い、まずSequence Metadata APIを使ってメタデータを保存し、url
とランダムに生成されたtokenID
(これにより並列リクエストが可能)がクライアントに返されます。その後、ユーザーがコレクティブルを確認し、ミントに同意した後、tokenID
とユーザーのaddress
がステップ5で作成したワーカーに返され、ミント処理が行われます。
tokenID
とurl
をフロントエンドに渡し、ユーザーがミントする前に内容を確認できるようにします:
tokenId
をユーザーのアドレスにミントすることです。ここでは、ステップ5で作成したCloudflare Workerにリクエストを送り、ユーザーにトークンをミントします。
request.headers
のReferrer
値をwrangler.toml
のCLIENT_URL
と比較することで簡単に制御できます。
wrangler.toml
でDAILY_MINT_RESTRICTION
というパラメータを設定し、1日あたりの最大ミント数を制限できます。また、必要に応じてプロトコルにADMIN
を追加し、無制限にミントできる権限を持たせることも可能です。
これらの機能は、以下の手順でコードに実装できます:
hasDailyMintAllowance
は2つの関数に分かれています:
address
のトランザクションを1日分ページネーションで取得するfullPaginationDay
from
が0x
アドレスであることに対応するmintCount
pnpm install @0xsequence/indexer
が必要です。
実装時は、インデクサーから最初のトランザクションバッチとpage.after
値を取得し、whileループでタイムスタンプが24時間未満かどうかを継続的にチェックしながら、一時配列に追加していきます。これにより、利用可能なすべてのトランザクションを取得できます:
ERC721
およびERC1155
標準のSequenceコントラクトからミントされたすべてのコレクティブルは、from
が0x
アドレスとなります: